Writing Selectors

At this point, you should be familiar with the basic structure of a CSS statement. Every CSS statement is made up of a selector and a declaration block. The selector tells the browser what HTML element we want to style and the declaration block tells the browser what styles need to be applied to that HTML.

For this exercise, I want you to focus exclusively on the selector part of a CSS statement. To do this, I've created a webpage that is lacking style. The webpage already has ids and classes added to the HTML, but it's missing the right selectors to add the style.

<div id="menu">
  <h1 class="item">Chicken Clay Pot</h1>
  <img src="img/clay-pot.jpg" alt="clay pot" class="picture">
  <p class="description">Crispy rice baked in clay pot topped with chicken and vegetables</p>
</div>

/* missing id */ {
  text-align: center;
}
/* missing class */ {
  color: red;
}
/* missing class */ {
  border-radius: 5px;
}
/* missing class */ {
  font-style: italic;
}

It's your job to download the webpage and fill-in the missing selectors. If you do it right, your webpage should end up looking like this…

How to Complete this Exercise

1. Open the index.html file in your Workspace below.
2. Edit index.html and add the missing id and class selectors within the <style> tags.
3. When you've successfully added the correct selectors, your site should look like the picture. Click over to solution.html to see how I did it.